<template>
  <view class="total">
    <!-- 描述 -->
    <view class="desc">
      <view class="top justify-between">
        <view>{{ current_hotel_info.HotelName }}</view>
        <!-- <view class="workTime flex-center">{{ Current_Date }} {{ Banci }}</view> -->
      </view>
      <view class="bottom justify-between">
        <text>账号：{{ current_hotel_info.UserName }}</text>
        <view class="align-center">
          <image
            style="width: 40rpx; height: 30rpx; margin-right: 8rpx"
            src="@/static/images/user/change_user.png"
          ></image>
          <text @click="route.$route_to(loginPage_index)">切换酒店</text>
        </view>
      </view>
    </view>
    <!-- 到期信息 -->
    <view class="expirationInformation justify-between">
      <text
        @click="
          route.$route_to('/userPages/accountInformation/accountInformation')
        "
      >
        {{ user_info.ExpiredDate }} 到期
      </text>
      <text
        @click="route.$route_to('/userPages/accountInformation/changePassword')"
      >
        修改密码
      </text>
    </view>

    <!-- 设置 -->
    <u-cell-group
      :customStyle="{
        'font-size': '32rpx',
        'font-family': 'SourceHanSansCN-Regular-, SourceHanSansCN-Regular',
        'background-color': '#fff'
      }"
    >
      <u-cell
        clickable
        title="房间设置"
        isLink
        url="/"
        :rightIconStyle="{
          width: '9rpx',
          height: '18rpx',
          'font-weight': 'bold'
        }"
      ></u-cell>
      <u-cell
        clickable
        title="付款方式设置"
        isLink
        url="/"
        :rightIconStyle="{
          width: '9rpx',
          height: '18rpx',
          'font-weight': 'bold'
        }"
      ></u-cell>
      <u-cell
        clickable
        title="退房时间设置"
        isLink
        url="/userPages/checkOut/checkOut"
        :rightIconStyle="{
          width: '9rpx',
          height: '18rpx',
          'font-weight': 'bold'
        }"
      ></u-cell>
      <u-cell
        clickable
        title="夜审设置"
        isLink
        url="/userPages/nightReviewSettings/nightReviewSettings"
        :rightIconStyle="{
          width: '9rpx',
          height: '18rpx',
          'font-weight': 'bold'
        }"
      ></u-cell>
      <u-cell
        clickable
        title="消费设置"
        isLink
        url="/userPages/consumptionSettings/consumptionSettings"
        :rightIconStyle="{
          width: '9rpx',
          height: '18rpx',
          'font-weight': 'bold'
        }"
      ></u-cell>
    </u-cell-group>

    <u-cell-group
      :customStyle="{
        'font-size': '32rpx',
        'font-family': 'SourceHanSansCN-Regular-, SourceHanSansCN-Regular',
        'background-color': '#fff',
        'margin-top': '24rpx'
      }"
    >
      <u-cell
        clickable
        @click="showUnbindHotel = true"
        title="解除绑定"
      ></u-cell>
    </u-cell-group>
    <u-modal
      :show="showUnbindHotel"
      content="是否确认解除绑定"
      @confirm="confirmUnbindHotel"
      @cancel="showUnbindHotel = false"
      closeOnClickOverlay
      showCancelButton
      @close="showUnbindHotel = false"
    >
      <view class="flex-center" style="height: 100rpx">是否确认解除绑定</view>
    </u-modal>
  </view>
</template>

<script lang="ts" setup>
import { getSessionCode } from '@/storage/global'
import { ref } from 'vue'
import route from '@/utils/route'
import { onShow } from '@dcloudio/uni-app'
import { GetRegInfo, INF_user_GetRegInfo_res } from '@/api/server/v1/user'
import { INF_UnbindHotel_params, UnbindHotel } from '@/api/group/login'
import { getUserInfo, INF_UserInfo } from '@/storage/login'
import { GetHotelName } from '@/api/server/v1/user'
import { loginPage_index } from '@/route'

const user_info = ref<INF_user_GetRegInfo_res>({
  SetUpDate: '',
  RoomCount: 0,
  ExpiredDate: ''
})
const current_hotel_info = ref<INF_UserInfo>({
  HotelId: '',
  HotelName: '',
  UserName: ''
})

const Banci = ref<string>('')
const Current_Date = ref<string>('')

const showUnbindHotel = ref(false)
const confirmUnbindHotel = () => {
  const unbind_data: INF_UnbindHotel_params = {
    HotelId: current_hotel_info.value.HotelId,
    UserName: current_hotel_info.value.UserName,
    SessionCode: getSessionCode()
  }
  // #ifdef MP-WEIXIN
  UnbindHotel(unbind_data).then(() => {
    route.$route_reLaunch(loginPage_index)
  })
  // #endif
}
// 必须实时刷新
onShow(() => {
  GetRegInfo().then((res) => {
    user_info.value = res as INF_user_GetRegInfo_res
    console.log(user_info.value, 'use')
  })
  GetHotelName().then((res) => {
    const result = res as { Bc: string; Date: string }
    Banci.value = result.Bc
    Current_Date.value = result.Date
  })
  current_hotel_info.value = getUserInfo()
})
</script>

<style scoped lang="scss">
.total {
  background-color: #f2f3f6;
  font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
  padding: 0 24rpx;
}
.workTime {
  font-size: 24rpx;
  font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
  color: #fff;
}
.desc {
  height: 140rpx;
  padding: 54rpx 32rpx 0 32rpx;
  color: #ffffff;
  background: linear-gradient(327deg, #409eff 0%, #0a81f7 100%);
  border-radius: 16rpx 16rpx 0rpx 0rpx;
  .top {
    font-size: 36rpx;
    margin-bottom: 10rpx;
  }
  .bottom {
    font-size: 24rpx;
    font-family:
      Source Han Sans CN-Regular,
      Source Han Sans CN,
      serif;
  }
}
.expirationInformation {
  background-color: #fff;
  padding: 0 32rpx 0;
  height: 78rpx;
  line-height: 78rpx;
  color: #94999c;
  font-size: 24rpx;
  margin-bottom: 20rpx;
}
</style>
